<template>
  <div>
      <button @click="fuzujian()">点击去父组件页面</button>
    <!-- 按键修饰符 -->
    <p>是否按下空格</p>
    <input type="text" @keydown.space="fun()" name id />
    <br />
    <!-- json跨域 -->
    <button @click="kuayu()">点我跨域</button><br>
    <!-- 逆向传值 -->
    <button @click="ni()">点我逆向传值</button>
    <!-- 过滤器设置省略号 -->
    <p >{{name | shenglve}}</p>
    <!-- ref使用 -->
    <input type="text" ref = 'refinput'>
    <button @click="ref()">点击得到输入框的内容</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
        zitext:"我是子组件的数据",
        id:123,
        name:"你是我的小苹果111111111111111111111111"
    };
  },
  filters:{
      shenglve(val){
           if(val.length>5){
                return val.substr(0,5)+".."
            }else{
                return val
            }
      }
  },
  methods: {
    fun() {
      console.log("按下了空格");
    },
    ni(){
        this.$emit("xiaoming",this.zitext)
    },
    ref(){
      console.log(this.$refs.refinput.value)
    },
    fuzujian(){
        // params 只能使用nameparams  url只有val  不显示key 相对来说安全一些
        // this.$router.push({name:"Xz",params:{xiaoming:id}})
        this.$router.push({path: '/konngbai/:xiaoming',query:{xiaoming:this.id}})
        // replace代表替换当前界面，如果-1返回的话   会返回上一个界面
        // this.$router.replace('/konngbai')
    }
    // kuayu(){
    //     axios({
    //         url:"/api/data/cityinfo/101320101.html",
    //         // 请求方式默认get
    //         method:"GET"
    //     }).then((ok)=>{
    //         console.log(ok)
    //     }).catch((err)=>{
    //         console.log(err)
    //     })
    // }
  }
};
</script>

<style>
</style>